<template>
  <div class="wrapper">
    <JTable :table-list="list" :config="tableConfig">
      <template slot="Actions" slot-scope="{row}">
        <el-button v-if="$_permisson('/core/dataScope/update')" type="text" @click="handleActive(row,'more')">详情</el-button>
        <el-button v-if="$_permisson('/core/dataScope/update')" type="text" @click="handleActive(row,'edit')">编辑</el-button>
        <el-button v-if="$_permisson('/core/dataScope/delete')" type="text" @click="handleActive(row,'delete')">删除</el-button>
      </template>
    </JTable>
    <el-dialog
      :title="dialog.title[dialog.active]"
      :visible.sync="dialog.dialogVisible"
      destroy-on-close
      append-to-body
    >
      <created :emit-data="emitObj" :read="dialog.active=='more'" @handleBoxEvent="handleDialog" />
    </el-dialog>
  </div>
</template>

<script>
import pageBtn from '@/views/mixin/pageBtn'
import { getList, addScope, deleteRole, editRole } from '@/api/dataPower'
import JTable from '@/components/JTable'
import created from './created'
export default {
  components: { JTable, created },
  mixins: [pageBtn],
  props: {
    currentItem: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    const listQuery = {
      total: 0,
      page: 1,
      size: 10,
      handleFilter: this.getList
    }
    const dialog = {
      dialogVisible: false,
      active: '',
      title: { created: '创建权限', edit: '更新权限', children: '功能点', more: '查看' }
    }
    const tableConfig = {
      listLoading: false,
      loadingText: '没数据',
      pagination: listQuery,
      tableAttribute: {
        'row-key': 'id',
        'tree-props': { children: 'children', hasChildren: '_' }
      },
      thead: [
        {
          type: 'selection'
        },
        {
          type: 'index',
          label: '-',
          start: 1
        },
        {
          prop: 'scopeName',
          label: '数据权限名称',
          width: 200,
          align: 'left'
        },
        {
          prop: 'scopeCode',
          label: '权限编号'
        },
        {
          prop: 'scopeColumn',
          label: '数据可见字段'
        },
        {
          prop: 'scopeField',
          label: '数据权限字段'
        },
        {
          prop: 'scopeValue',
          label: '数据权限值域'
        },
        {
          prop: 'allRole',
          label: '所有用户'
        },
        {
          prop: 'scopeClass',
          label: '数据权限类名'
        },
        {
          prop: 'note',
          label: '描述'
        },
        {
          prop: 'status',
          label: '状态'
        },
        {
          prop: 'scopeType',
          label: '数据权限类型'
        },
        {
          prop: '',
          label: 'Actions',
          type: 'actions',
          width: '200',
          align: 'center'
        }
      ],
      search: ['allRole_eq', 'scopeCode', 'scopeName', 'scopeType_eq'],
      activeBox: {
        // defaultBtn: true,
        btnRules: { created: '/core/dataScope/add', rulesFuntion: this.$_permisson }, // 按btn个数重左向右
        bindDefaultEvent: this.handleCreated
      }
    }
    return {
      list: [],
      listQuery,
      dialog,
      tableConfig,
      emitObj: {}
    }
  },
  computed: {
    menuId() {
      const { id } = this.currentItem
      return id
    }
  },
  watch: {},
  created() {
    this.getList()
  },
  mounted() {},
  methods: {
    getList(args = {}) {
      const { page: pageNum = 1, size: pageSize = 10, ...param } = args
      const params = { pageNum, pageSize, ...param }
      getList({ ...params, menuId_eq: this.menuId }).then(res => {
        const { data, code } = res
        if (code === 200) {
          this.listQuery.total = data.total
          this.list = data.records
        }
      })
    },
    handleCreated() {
      this.showDialog()
    },
    showDialog(target = 'created') {
      this.dialog.active = target
      this.dialog.dialogVisible = true
    },
    closeDialog() {
      this.dialog.active = ''
      this.dialog.dialogVisible = false
    },
    handleDialog(emitData) {
      const type = this.dialog.active
      const { target } = emitData
      if (!target) return this.closeDialog()
      if (type === 'created') {
        this.addItem(emitData)
        return
      }
      if (type === 'edit') {
        this.editItem(emitData)
        return
      }
    },
    handleActive(row, target) {
      this.emitObj = row
      if (['more', 'edit'].includes(target)) { this.showDialog(target) }
      const { id } = row
      this.currentId = id
      if (target === 'delete') {
        this.delItem(id)
        return
      }
    },
    delItem(ids) {
      this.$confirm('此操作不可逆转, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteRole(ids).then(res => {
          const { code, message } = res
          if (code === 200) {
            this.$message({
              message,
              type: 'success'
            })
            this.getList()
            return
          }
          this.$message.error(message)
        })
      })
    },
    editItem({ target }) {
      const { id } = this.emitObj
      editRole({ ...target, menuId: this.menuId, id }).then(res => {
        const { code, message } = res
        if (code === 200) {
          this.$message({
            message,
            type: 'success'
          })
          this.closeDialog()
          this.getList()
          return
        }
        this.$message.error(message)
      })
    },
    addItem({ target }) {
      addScope({ ...target, menuId: this.menuId }).then(res => {
        const { code, message } = res
        if (code === 200) {
          this.$message({
            message,
            type: 'success'
          })
          this.getList()
          this.closeDialog()
          return
        }
        this.$message.error(message)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper{
   padding: 0px 10px;
   margin: 0px;
}
</style>
